Rithika taking over for Kanishk: Implement Event Participation Analytics landing page with functional dropdowns and CSS modules by kanishkagarwal6101 · Pull Request #4162 · OneCommunityGlobal/HighestGoodNetworkApp

kanishkagarwal6101 · 2025-10-04T04:38:57Z

Description

Implemented the Event Participation Analytics landing page at /communityportal/reports/participation with comprehensive analytics dashboard, functional dropdowns, and CSS modules conversion. This addresses the urgent issue where the event registration page was only showing month/year view and the registration form/page was not accessible.

Fixes # (Event Participation Analytics landing page accessibility and functionality)

Related PRS (if any):

This frontend PR implements the complete Event Participation Analytics landing page as specified in the requirements.

Main changes explained:

Fixed routing in src/routes.jsx to make /communityportal/reports/participation accessible
Converted to CSS modules for all participation components:
- MyCases.jsx → uses MyCases.module.css
- DropOffTracking.jsx → uses Participation.module.css
- NoShowInsights.jsx → uses Participation.module.css
Created comprehensive analytics dashboard with new components:
- EventParticipationHeader.jsx - Header with navigation and event metrics summary
- EngagementSummaryCards.jsx - Key performance indicator cards
- EventTypePieChart.jsx - Pie chart for event type popularity visualization
- EngagementBarChart.jsx - Bar chart for monthly engagement trends
- AnalyticsNavigation.jsx - Navigation links to detailed analytics sub-pages
Added four new analytics sub-pages with functional dropdowns:
- VirtualVsInPerson.jsx - Compare virtual vs in-person attendance patterns
- EventValue.jsx - Analyze estimated event value and ROI calculations
- ParticipationTrends.jsx - Track participation growth over time
- EventPerformance.jsx - Detailed individual event performance metrics
Created CSS modules with dark mode support:
- Participation.module.css - Main styles for all participation components
- MyCases.module.css - Specific styles for MyCases component
Implemented functional dropdowns with dynamic data filtering for all analytics pages

How to test:

Check into current branch kanishk_design_the_landing_page_analytics_eventPopularity
Run npm install to install dependencies
Run npm start to start the app locally
Clear site data/cache
Log in as any user
Navigate to /communityportal/reports/participation
Verify the landing page loads with all sections:
- Header with navigation and metrics summary
- Engagement summary cards
- Pie chart and bar chart visualizations
- Analytics navigation section
Test navigation links to sub-pages:
- Virtual vs. In-Person Attendance
- Estimated Event Value
- Participation Trends
- Event Performance Metrics
Test dropdown functionality on each sub-page to ensure data changes dynamically
Test dark mode toggle to verify all components support theme switching

Screenshots or videos of changes:

Note:

All components use CSS modules for better maintainability and to prevent class name collisions
Mock data is used for demonstration purposes and should be replaced with real API data
Dropdowns are fully functional with dynamic data filtering
All navigation links are working and properly routed
The page serves as a central hub for accessing event participation data and analytics

netlify · 2025-10-04T04:39:02Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`59f2184`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a3b586a8012d100088177fa
😎 Deploy Preview	https://deploy-preview-4162--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

sumedhkumar96

Followed the instructions provided by the developer and verified all functionalities as stated:

1. Landing Page

✅ Header with navigation and metrics summary

✅ Engagement summary cards

✅ Pie chart and bar chart visualizations

✅ Analytics navigation section

2. Navigation Links to Sub-Pages

✅ Virtual vs. In-Person Attendance

✅ Estimated Event Value

✅ Participation Trends

✅ Event Performance Metrics

3. Dropdown Functionality

✅ Verified that dropdowns on each sub-page dynamically update the displayed data

4. Dark Mode Toggle

❌ Tested dark mode toggle, some fonts do not fully support theme switching

Aswin20010

Tested the landing page at /communityportal/reports/participation and verified that all sections — header, summary cards, charts, and navigation to sub-pages — load and function correctly. Dropdowns work as expected, and data updates dynamically across views.
However, in dark mode, the font contrast is low, making text and labels less visible in several areas. Functionality is solid, but readability needs improvement. Please enhance text contrast for better visibility before merging.

Aditya-gam

Tested the changes mentioned in this PR. All the links and pages work correctly and are visually readable in light mode.
In dark mode, some of the titles and labels on the charts are dark-colored, making them difficult to see.
The three-button links have no backlinks to the landing page.

TestVideo.mov

sonarqubecloud · 2025-10-29T19:40:23Z

Quality Gate passed

Issues
29 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.8% Duplication on New Code

See analysis details on SonarQube Cloud

kanishkagarwal6101 · 2025-10-29T19:41:04Z

Thank you for the feedback everyone some things miss the eyes, but I have made sure to fix the issues outlined by you all. Please review the pages again and approve if all looks good!

Aditya-gam

Tested the changes mentioned in this PR. All links and pages work correctly and are visually readable in light mode.

In dark mode, all titles and labels on the charts are now clearly readable with proper contrast.
The comprehensive dark mode CSS fixes ensure that chart legends, axis labels, bar labels, and all text elements have sufficient contrast against the dark background.

All analytics sub-pages (Virtual vs. In-Person Attendance, Estimated Event Value, Participation Trends, and Event Performance Metrics) now include backlinks to the participation landing page, improving navigation flow.

Testing:

Verified functionality across all pages:

Landing page loads with all sections (header, engagement cards, charts, navigation)
All four analytics sub-pages are accessible and functional
Dropdown filters work correctly with dynamic data updates
Dark mode toggle works properly throughout all components
Navigation links function as expected

Test video demonstrating the functionality:

TestVideoUpdate.mov

Note:

You should remove yarn.lock from the commit so there are no merge conflicts with development.

Anusha-Gali

Hi Kanishk,

I have reviewed your PR locally and most of the functionalities do work as per requirement but there are a few misses in the dark mode (point 1,2,3,4,5) and one in light mode(point 4):
In Estimated Event Value Analysis - The word Value in Monthly Value Trends overlaps the X-axis and the title and there is no data label for Y axis

In Participation Trends Analysis - The word Attendance in Monthly Participation Trends overlaps the title and there is no data label for Y axis

On the dashboard - The word Attendance in Monthly Engagement Trends overlaps the title

In Event Performance Metrics - When the Upcoming Events dropdown is selected in the Filter Events - the dates do not co-relate to the current system date

On the dashboard - In Upcoming Events - When selected filters that also show the words "More" and "Show Less" - their text color is black and does not correlate to dark mode

kanishkagarwal6101 · 2025-12-12T18:57:22Z

Hello All, I have made the fixes as per the feedback and i re-request your review again, please and thank you

debadyuti23

Hi @kanishkagarwal6101 after landing the webpage, these are my observations in the video shown below.

PR_4162.mp4

In short:

every functionality is working
in dark mode some boxes dont render with appropriate color. Here's a screenshot of the broken dark mode

Therefore would request to resolve this bug since other reviewers are also having issues with dark mode

rohanrastogi311

Hi Kanishk, great work with the page. All functionality except dark mode is working great. My video below of the run through showcases this as well as highlights the issues with the dark mode toggle. Some of the dark mode toggle issues are: The boxes for no-show rate insights and Drop off and now show rate tracking.

Video of my run-through highlighting the issues: https://www.dropbox.com/scl/fi/hexzbsxh9am08co8u3i74/PR-4162-Recording.mov?rlkey=72bphz7hje7vlhghuyzhrmhlw&st=6b8i756k&dl=0

sonarqubecloud · 2025-12-16T19:29:50Z

Quality Gate passed

Issues
28 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.7% Duplication on New Code

See analysis details on SonarQube Cloud

kanishkagarwal6101 · 2025-12-16T19:31:04Z

Hello all, I have fixed the dark mode caveats please re review the pr. Your feedback helps a lot thank you.

Anusha-Gali

Hi Kanishk,

I have re-reviewed the PR locally and all the errors i have pointed appear to be fixed except i could not test The Show More or Show Less probably due to the counts of event being less.

rohanrastogi311

Hi Kanishk,

Well done on the fix. Dark mode issues are rectified.

Vikas-8055

Hi Kanishk,
I have thoroughly tested this PR locally and all functionalities work as expected. The landing page loads correctly with all sections (header, engagement cards, charts, and navigation links). All sub-pages (Virtual vs. In-Person, Event Value, Participation Trends, Event Performance) navigate properly and display data correctly. Dropdown filters work smoothly and update data dynamically. Dark mode implementation is excellent - all text, charts, and labels have proper contrast and are clearly readable with no overlap issues. Responsive design adapts well to different screen sizes. Overall, the analytics dashboard is clean, intuitive, and fully functional.

Shravan-neelamsetty

Hi Kanishk, I tested this PR locally by navigating to /communityportal/reports/participation and verified all the functionalities. The landing page loads correctly with all sections including the header, engagement summary cards, pie chart, bar chart visualizations, and analytics navigation. All four sub-pages (Virtual vs. In-Person Attendance, Estimated Event Value, Participation Trends, and Event Performance Metrics) are accessible and working properly. The dropdown filters work smoothly and update data dynamically. Dark mode implementation looks good with proper text contrast across all pages and charts. Backlinks to the landing page are working as expected.

Ganesh112001

Hi Kanishk, I tested this PR locally following the provided steps and verified that all functionality works perfectly as intended. After checking out the kanishk_design_the_landing_page_analytics_eventPopularity branch, installing dependencies, and starting both servers, I navigated to /communityportal/reports/participation and confirmed the landing page is now fully accessible with all components rendering correctly. The comprehensive analytics dashboard displays beautifully with the header showing event metrics summary, engagement summary KPI cards, pie chart for event type popularity, bar chart for monthly engagement trends, and navigation links to all four sub-pages. I thoroughly tested each sub-page (Virtual vs. In-Person Attendance, Estimated Event Value, Participation Trends, and Event Performance Metrics) and verified that all functional dropdowns work smoothly with data updating dynamically based on selections. The CSS modules conversion is clean with consistent styling across all components, and dark mode support works flawlessly across every page with proper contrast and theme adaptation. No console errors were observed during testing, and the routing fix successfully makes the page accessible via direct URL. This is a comprehensive and polished implementation that successfully resolves the urgent accessibility issue while delivering a complete, professional analytics solution. Everything functions perfectly and is ready for merge.

saurabhdipte

Hi Kanishk,

I tested and reviewed your changes locally, everything looks good. The sublinks are working fine, and each dropdown menu is functioning correctly. The pie chart and bar graphs are displaying proper headings as expected, and dark mode is working fine as well.

DeepighaJ

Checked out to the current branch and ran PR locally.
When navigating to /communityportal/reports/participation its asking to login.
Entered the credentials but no action happening on clicking submit.
No error msg or wrong credential or successful login.

…nctional dropdowns and CSS modules

…ytics - Fixed dark mode text contrast across all components (cards, charts, tables) - Improved hover states for dark mode (no more white backgrounds) - Fixed dark mode horizontal stretching on sub-pages (100% viewport width) - Left-aligned main heading on landing page for better alignment - Enhanced readability with proper color contrast in dark mode - Fixed backlink button visibility in light mode - Ensured all content remains centered while dark background stretches full width

- Add dark mode styling for 'Drop-off rate' and 'No-show rate' text in DropOffTracking component - Fix duplicate CSS selectors to resolve stylelint errors - Fix CSS syntax error (extra closing brace) - Ensure text is visible in dark mode with proper color contrast

…introduced during rebase

…, array index keys, contrast issues, duplicate selectors

sonarqubecloud · 2026-06-24T04:10:04Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.8% Duplication on New Code

See analysis details on SonarQube Cloud

one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Oct 7, 2025

sumedhkumar96 self-requested a review October 9, 2025 00:38

sumedhkumar96 suggested changes Oct 9, 2025

View reviewed changes

sumedhkumar96 assigned sumedhkumar96 and kanishkagarwal6101 and unassigned sumedhkumar96 Oct 9, 2025

Aswin20010 suggested changes Oct 15, 2025

View reviewed changes

Aditya-gam suggested changes Oct 19, 2025

View reviewed changes

kanishkagarwal6101 requested review from Aditya-gam, Aswin20010 and sumedhkumar96 October 29, 2025 22:37

Aditya-gam previously approved these changes Nov 20, 2025

View reviewed changes

Anusha-Gali suggested changes Dec 4, 2025

View reviewed changes

kanishkagarwal6101 dismissed Aditya-gam’s stale review via b4724ca December 12, 2025 18:50

kanishkagarwal6101 requested a review from Anusha-Gali December 12, 2025 18:56

debadyuti23 suggested changes Dec 13, 2025

View reviewed changes

rohanrastogi311 suggested changes Dec 13, 2025

View reviewed changes

kanishkagarwal6101 requested review from debadyuti23 and rohanrastogi311 December 16, 2025 19:30

Anusha-Gali approved these changes Dec 17, 2025

View reviewed changes

rohanrastogi311 approved these changes Jan 3, 2026

View reviewed changes

Vikas-8055 approved these changes Jan 8, 2026

View reviewed changes

Shravan-neelamsetty previously approved these changes Jan 8, 2026

View reviewed changes

Ganesh112001 approved these changes Jan 11, 2026

View reviewed changes

one-community changed the title ~~Vikas taking over for Kanishk: Implement Event Participation Analytics landing page with functional dropdowns and CSS modules~~ XXXX taking over for Kanishk: Implement Event Participation Analytics landing page with functional dropdowns and CSS modules May 3, 2026

saurabhdipte previously approved these changes May 7, 2026

View reviewed changes

DeepighaJ requested changes May 21, 2026

View reviewed changes

rithika-paii changed the title ~~XXXX taking over for Kanishk: Implement Event Participation Analytics landing page with functional dropdowns and CSS modules~~ Rithika taking over for Kanishk: Implement Event Participation Analytics landing page with functional dropdowns and CSS modules Jun 12, 2026

rithika-paii dismissed stale reviews from saurabhdipte, ManojPuttaswamy, roshini1212, Shravan-neelamsetty, and themself via c6dfcc8 June 16, 2026 18:00

rithika-paii force-pushed the kanishk_design_the_landing_page_analytics_eventPopularity branch 3 times, most recently from 2c11ef9 to a73a1cc Compare June 18, 2026 16:11

kanishkagarwal6101 and others added 13 commits June 23, 2026 23:08

Kanishk: Implement Event Participation Analytics landing page with fu…

d4ff68c

…nctional dropdowns and CSS modules

Remove print-only heading and footer from participation landing page

9c8a0cd

chore: remove package-lock.json to avoid Netlify cache issues

82a5e3e

fix: remove duplicate imports and stale unused imports in routes.jsx …

633d799

…introduced during rebase

chore: regenerate yarn.lock

2901197

fix: prettier formatting in EventParticipation.jsx

f43e463

fix: resolve SonarQube code smells - unused imports, nested ternaries…

b3c6f8f

…, array index keys, contrast issues, duplicate selectors

fix: prettier formatting in VirtualVsInPerson.jsx

6e6eaae

fix: address remaining SonarQube contrast and array-index-key issues

4d070b6

fix: remove duplicate brace causing syntax error

8e35c72

fix: use solid colors for navLink to resolve contrast issues

59f2184

rithika-paii force-pushed the kanishk_design_the_landing_page_analytics_eventPopularity branch from defea3e to 59f2184 Compare June 24, 2026 04:09

Uh oh!

Conversation

kanishkagarwal6101 commented Oct 4, 2025

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Note:

Uh oh!

netlify Bot commented Oct 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

sumedhkumar96 left a comment

Choose a reason for hiding this comment

1. Landing Page

2. Navigation Links to Sub-Pages

3. Dropdown Functionality

4. Dark Mode Toggle

Uh oh!

Aswin20010 left a comment

Choose a reason for hiding this comment

Uh oh!

Aditya-gam left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Oct 29, 2025

Quality Gate passed

Uh oh!

kanishkagarwal6101 commented Oct 29, 2025

Uh oh!

Aditya-gam left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kanishkagarwal6101 commented Dec 12, 2025

Uh oh!

debadyuti23 left a comment

Choose a reason for hiding this comment

Uh oh!

rohanrastogi311 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Dec 16, 2025

Quality Gate passed

Uh oh!

kanishkagarwal6101 commented Dec 16, 2025

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

rohanrastogi311 left a comment

Choose a reason for hiding this comment

Uh oh!

Vikas-8055 left a comment

Choose a reason for hiding this comment

Uh oh!

Shravan-neelamsetty left a comment

Choose a reason for hiding this comment

Uh oh!

Ganesh112001 left a comment

Choose a reason for hiding this comment

Uh oh!

saurabhdipte left a comment

Choose a reason for hiding this comment

Uh oh!

DeepighaJ left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Jun 24, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

netlify Bot commented Oct 4, 2025 •

edited

Loading

Aditya-gam left a comment •

edited

Loading

Anusha-Gali left a comment •

edited

Loading

rohanrastogi311 left a comment •

edited

Loading